<template>
  <div class="webGis-comp-ct">
  
  <mt-header :title="header_title" fixed>
    <mt-button icon="back" @click="$router.back(-1)" slot="left">返回</mt-button>
  </mt-header>
    <div id="map" class="map"></div>
  </div>
</template>
<script>
export default {
  name: 'webGis'
  ,data() {
    return {
      header_title: 'webGis_Demo',
      lon:'108.347',
      lat:'22.81',
      map:false
    }
  },
  methods: {
    initMap(p_lon, p_lat) {
            this.map = new WebGIS.Map({
                userName: 'gxadmin',
                password: 'Good123*',
                container: 'map',
                center: [p_lon, p_lat],
                zoom: 14,
                style: style,
                wmsStyle: wmsStyle
            });
            //注册map的点击事件
            this.map.addEventListener("click", function(e) {
                console.log(JSON.stringify(e));
            });
            this.map.on('load', function() {
              console.log('map load ok!');
              //canvas在webgis的js库中被强行设置为绝对定位了，只能在vue页中展示一半……
              let ca = document.getElementsByTagName('canvas')[0]
              ca.style.position = "initial"
              // console.log(ca);
              
            })
        }
  },mounted () {
    // webGisUtil.input()
    this.initMap(this.lon,this.lat);
  },
}
</script>
<style lang="scss" scoped>
.webGis-comp-ct {
  .map{
    height: 500px;
  }
}
</style>
